<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>全屏钢琴</title>
    <script src="../libs/Tone.js"></script>
    <script src="../libs/Unify.js"></script>
    <script src="../libs/moonJs.js"></script>
    <script src="../libs/TweenMax.min.js"></script>
    <script src="../libs/ColorManager.js"></script>
    <script src="../libs/vconsole.js"></script>
    <style type="text/css">
        body {
            margin: 0;
            background-color: #EE8D99;
        }
    </style>
</head>

<body>
    <script>
        //自己做音频效果https://beatbucket.io/
        var keys=['`', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'Backspace',
                 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\', 
                'CapsLock', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', "'", 'Enter',
                'Shift', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/',
                'Control'];
        var keyDict={};
        var moonjs = new MoonJs();
        var [width,height]=[window.innerWidth-5,window.innerHeight-5];
        var canvas=moonjs.createCanvas({w:width,h:height,c:'#EE8D99'})
        moonjs.init(canvas)
        moonjs.start();//开始渲染
        var letters=['C','D','E','F','G','A','B'];
        var nums=[0,1,2,3,4,5,6,7,8];
        var ccs=[];
        var [wid,hei,g]=[width/7-3,height/8-3,2];
        var [cx,cy]=[wid/2+g+5,hei/2+g+5];
        var colors=ColorManager.warnCoolColors([2,3,5,6,9,10,11,9])
        // var c=ColorManager.warnCoolColors()[8];
        // var l=0;
        // for(let i=0;i<7;i++){//同一颜色逐渐变亮  
        //     colors.push(ColorManager.changeColorLight(c,l+=0.03))
        // }
        let j=0;
        for(let i=0;i<8;i++){
            let n=nums[i];
            for(let k=0;k<7;k++){
                let l=letters[k];
                let cc=l+n;
                ccs.push(cc);
                let color=colors[i%2==0?k:7-k]
                let rect=moonjs.createRectText(cc,wid,hei,'#fff',color);
                rect.setXY(cx+k*(wid+g),cy+i*(hei+g));
                rect.name=cc;
                if(j<keys.length&&(!Unify.isMobile())){//手机上不显示按键
                    let key=keys[j++];
                    rect.key=key;
                    rect.childs[0].setText(cc+'  '+key);
                    rect.childs[0].setFont("20px Arial");
                    moonjs.mouseDown(rect,mouseDown);
                    moonjs.mouseUp(rect,mouseUp);
                }else{
                    rect.childs[0].setFont("25px Arial")
                }
            }
        }
        function mouseDown(o){
            let cc=o.name;
            o.setScale(0.9);
            TweenMax.killTweensOf(o)//删除动画 
            now = Tone.now();
            synth.triggerAttack(cc, now)//开始播发
        }
        function mouseUp(o){
            let cc=o.name;
            TweenMax.to(o,0.5,{scaleX:1,scaleY:1,ease:Bounce.easeOut})//增加动画
            synth.triggerRelease(cc, now+0.3)//过0.3秒后停止，是逐渐变小的
            if(cc=='B7'){
                changeSynth();
            } else if(cc=='A7'){
                playSound(0);
            }
        }
        
        //var synth = new Tone.Synth().toDestination();//单声道（只能有一个声音）
        var synth = new Tone.PolySynth(Tone.Synth).toDestination();//多声道（可以有多个声音）
        var syIndex=0;
        var syArray=[Tone.Synth,Tone.FMSynth,Tone.AMSynth,Tone.DuoSynth,Tone.MonoSynth,Tone.MetalSynth,Tone.MembraneSynth];
        function changeSynth(){
            if(++syIndex==syArray.length){
                syIndex=0;
            }
            synth = new Tone.PolySynth(syArray[syIndex]).toDestination();
        }
        //var synth = new Tone.PolySynth(Tone.Synth).toDestination();//多声道（可以有多个声音）
        //var synth = new Tone.PolySynth(Tone.FMSynth).toDestination();//多声道（可以有多个声音）
        //var synth = new Tone.PolySynth(Tone.AMSynth).toDestination();//多声道（可以有多个声音）
        //var synth = new Tone.PolySynth(Tone.DuoSynth).toDestination();//多声道（可以有多个声音）
        // var synth = new Tone.PolySynth(Tone.MonoSynth).toDestination();//多声道（可以有多个声音）//单管道声音
        // var synth = new Tone.PolySynth(Tone.MetalSynth).toDestination();//多声道（可以有多个声音）//重金属声音
        //var synth = new Tone.PolySynth(Tone.MembraneSynth).toDestination();//多声道（可以有多个声音）（很有趣的声音）
        // var synth = new Tone.PolySynth(Tone.PolySynth).toDestination();//有问题，声音停不下来
        var now = Tone.now();

        window.addEventListener('keydown', keyDown,true);
		window.addEventListener('keyup', keyUp,true);
        function keyDown(e) {
            var key = e.key;
            if(key.length==1)key=key.toUpperCase();
            if(keyDict[key])return;
            keyDict[key]=true;
            for(let o of moonjs.map.values()){
                if(o.key==key){
                    mouseDown(o);
                }
            }
            console.log(key);
            if(e.code.includes('Numpad')){
                playSound(e.code.split('Numpad')[1]);
            }
        }
        function keyUp(e) {
            var key = e.key;
            if(key.length==1)key=key.toUpperCase();
            delete keyDict[key];
            for(let o of moonjs.map.values()){
                if(o.key==key){
                    mouseUp(o);
                }
            }
        }

        function playSound(index){
            var musics=[
                '334554321123322,334554321123211,22312343123432121,334554321123211',//欢乐送
                '1155665443322155443325544332',//小星星
            ]
            if(index<musics.length){
                let values=musics[index].split('');
                let t=300;
                for(let i=0;i<values.length;i++){
                    let cc=letters[values[i]]+'4';
                    setTimeout(()=>{
                        mouseAdd(cc,1)
                    },i*t);
                    setTimeout(()=>{
                        mouseAdd(cc,2)
                    },i*t);
                }
            }
        }
        function mouseAdd(cc,n){
            for(let o of moonjs.map.values()){
                if(o.name==cc){
                    if(n==1) mouseDown(o);
                    else     mouseUp(o);
                }
            }
        }
        if(Unify.isMobile()){//移端上操作
            document.addEventListener('touchstart',touch, false);
            document.addEventListener('touchend',touch, false);
            var target;
            function touch (event){
                event.stopPropagation();
                if(event.touches.length>=2){//不支持多个手指触控操作
                    return;
                }
                var event = event || window.event;
                if(!target,event.touches.length){
                    let [x,y]=[event.touches[0].clientX,event.touches[0].clientY];
                    for(let o of moonjs.map.values()){
                        if(o.hitPoint(x,y)){
                            target=o;
                        }
                    }
                }
                switch(event.type){
                    case "touchstart":
                        target&&mouseDown(target);
                        break;
                    case "touchend":
                        target&&mouseUp(target);
                        target=null;
                        break;
                } 
            }
        }
        //H5移动端调试神器 - vconsole.js
        //window.onload = function() { var vConsole = new VConsole()}
    </script>
</body>

</html>
